<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="register-pg">
        <header class="cl" v-show="header.show">
            <div class="nav-bar cl">
                <span class="goback arrow_l" @click="goback"></span>
                <span class="page-name">密码找回</span>
            </div>
        </header>
        <div class="split-space"></div>
        <div class="register-wrap forget-wrap">
            <div class="row tel-row">
                <label class="lbl-col">+86</label>
                <div class="form-col">
                    <input type="text" maxlength="11" v-model="cellnum" placeholder="请输入注册手机号码" @blur="cellblur">
                </div>
            </div>
            <div class="row sms-code-row" v-show="showVer">
                <div class="form-col">
                    <input type="text"  v-model="verifcode" id="verifcode" placeholder="请输入验证码">
                </div>
                <span class="sms-code-link" @click.prevent="coderefresh"><img :src="verifcodeurl" ></span>
            </div>
            <div class="row sms-code-row">
                <div class="form-col">
                    <input type="text" maxlength="8" v-model="smscode" placeholder="请输入短信验证码">
                </div>
                <button type="button" class="sms-code-link" @click="getcode">获取验证码</button>
            </div>
            <div class="row">
                <div class="form-col">
                    <input type="password" maxlength="16" v-model="newpassa" placeholder="请设置新密码" @blur.touch="pwd">
                </div>
            </div>
            <div class="row">
                <div class="form-col">
                    <input type="password" maxlength="16" v-model="newpassb" placeholder="请重复新密码" @blur.touch="pwd">
                </div>
            </div>
            <p class="btn-wrap forget-reset">
                <button type="button" @click="btnsubmit">确认</button>
            </p>
            <p class="btn-wrap"><a :href="loginurl">返回登录页面</a></p>
        </div>
        <toast ref="toast"></toast>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script type="text/javascript" src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script>
    var toast = new component.popup.toast();
    var store_id=APP.getQueryString("storeid");
    var forgot = new Vue({
        el: "#register-pg",
        data: {
			header:{
				show: !APP.iswechat()
			},
            message: "hello!",
            chkdata: "",
            newpassa: "",
            newpassb: "",
            smscode:"",
            err: false,
            pwd_err: false,
            btndisable: false,
            cellnum:"",
            err_flag:false,
            err_msg:"",
            verifcode:"",
            showVer: true,
            verifcodeurl:APIPHP+"index.php?r=home/index/get-verify&storeid="+store_id,
            loginurl: "login.html?storeid="+store_id
        },
        methods: {
            goback: function() {
                window.history.go(-1);
            },
            pwd: function() {
                if (this.newpassa!==""&&this.newpassb!=="") {
                    if (this.newpassa !== this.newpassb) {
                   this.$refs.toast.show("两次输入的密码不一致！");
                } 
                }
            },
            chk: function() {
                this.chkdata = !this.chkdata;
                alert(this.chkdata);
            },
            cellblur:function () {
                var _cellnum=this.cellnum;
                var regexphone = /^1\d{10}$/;
                if (!regexphone.test(this.cellnum)||_cellnum.length<11) {
                    this.$refs.toast.show("请输入正确的手机号码");
                    this.cellnum="";
                    return false;
                }
            },
            coderefresh: function(e) {
                this.verifcodeurl = APIPHP+"index.php?r=home/index/get-verify&storeid="+store_id+"&tm=" + Math.random()
            },
            getcode: function (e) {
                var _code=this.verifcode;
                var _cellnum = this.cellnum;
                var regexphone = /^1\d{10}$/;
               
                if (!regexphone.test(_cellnum)) {
                    this.$refs.toast.show("请输入正确的手机号！");
                    return false;
                } else {
                     if (this.showVer && _code=="") {
                    this.$refs.toast.show("请输入验证码！");
                    return false;
                }
                    Vue.http.post(APIPHP+'index.php?r=home/index/get-sms-code&storeid='+store_id, {
                        mobile:_cellnum,
                        type:2,
                        code:_code
                    },{emulateJSON:true}).then(function(_res) {
                        console.log(_res.body)
                        if (_res.body.flag==1){
                            e.target.disabled = true;
                            var sec = 60;
                            var timer = setInterval(function() {
                                sec = sec - 1;
                                e.target.innerText = sec + "s";
                                if (sec <= 0) {
                                    e.target.innerText = "获取验证码";
                                    e.target.disabled = "";
                                    clearInterval(timer);
                                }
                            }, 1000)
                            
                        } else {
                            if (_res.body.flag == -1){
                                forgot.showVer = true;
                            }
                            forgot.$refs.toast.show(_res.body.msg);
                        }

                    }, function(_res) {
                        forgot.$refs.toast.show("连接服务器失败，请稍候重试！");
                    });
                }
            },
            btnsubmit: function () {
                var _cellnum=this.cellnum,
                regexphone = /^1\d{10}$/,
                smscode=this.smscode,
                passwda=this.newpassa,
                passwdb=this.newpassb;
                if (_cellnum == ''){
                    forgot.$refs.toast.show("手机号码不能为空");
                    return;
                }
                if (this.showVer && this.verifcode == ''){
                    forgot.$refs.toast.show("图形验证码不能为空");
                    return;
                }
                if (smscode == ''){
                    forgot.$refs.toast.show("短信验证码不能为空");
                    return;
                }
                if (passwda == ''){
                    forgot.$refs.toast.show("新密码不能为空");
                    return;
                }
                if (passwdb == ''){
                    forgot.$refs.toast.show("确认密码不能为空");
                    return;
                }
                if (!regexphone.test(_cellnum)||_cellnum.length<11) {
                    forgot.$refs.toast.show("请输入正确的手机号码");
                    return false;
                }
                if( !/^[a-zA-Z0-9]{6,18}$/.test(passwda) ){
                    forgot.$refs.toast.show("请填写6-18数字或者英文密码");
                    return false;
                }
                if (passwda!==passwdb) {
                    this.$refs.toast.show("两次输入的密码不一致");
                    return false;
                }
                Vue.http.options.xhr = {
                withCredentials: true
            }
            Vue.http.options.credentials = true;
                Vue.http.post(APIPHP+'index.php?r=home/index/find-pwd&storeid='+store_id, {
                        mobile: _cellnum,
                        sms_code: smscode,
                        password: passwda,
                        repassword: passwdb
                    },{emulateJSON:true}).then(function (_res) {
                        if (_res.body.flag==1) {
                           forgot.$refs.toast.show("密码已重置，请重新登录"); 
                           setTimeout(window.location.href="login.html?storeid="+store_id,3000)
                           
                        }else {
                            forgot.$refs.toast.show(_res.body.msg); 
                        }
                        
                    })
            }
        }
    })
    </script>
</body>

</html>
